<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript" src = "../jquery-1.7.2.js"></script>
    <script type = "text/javascript">
        //传参函数和HTML标签
        $(function(){
            $("<div>我是第一个</div>").appendTo("body");
        })

        //传参选择器
        $(function(){
            var classObj1 = $(".btn");
            var classObj2 = $("input.btn");
            var labelObj3 = $("button");
            // classObj1[0].onclick = function(){
            //     alert(classObj1[0].value);
            // }
            // classObj1[1].onclick = function(){
            //     alert(classObj1[1].value);
            // }

        //类选择器有标签限制
        //     classObj2.click(function(){
        //         alert(classObj2[0].value);
        //     })

            //$的本质
        //     var btn4 = document.getElementsByClassName("input.btn");
        //     alert(btn4);
        //     alert(labelObj3[0]);

        //标签名选择器
        // labelObj3.click(function(){
        //     alert(labelObj3[0].value);
        //     alert(labelObj3[1].value);
        //     alert(labelObj3[2].value);
        //     alert(labelObj3[3].value);                  //超过坐标报错
        // })


        })
    </script>
</head>
<body>
    <button name = "btn" value = "按钮1">按钮1</button>
    <button class = "btn" value = "按钮2">按钮2</button>
    <button class = "btn" value = "按钮3">按钮3</button>
    <input type = "button" class = "btn" value = "按钮4"/>
</body>
</html>